<template>
	<view class="active-share-effect" :style="'background-color:' + gdDetailSkin.bgColor">
		<phoneSimuHead :titleTxt="titleTxt" :isShow="true"></phoneSimuHead>
		<view class="info-box" @click.="curEditId = action.editGoodsDetailsBg" @click="curEditId = action.editGoodsDetailsBg">
			<view class="info-head">
				<view class="c-n" :class="{'dashed-line' : curEditId==action.editCompanyName}" @click.stop="edit({act:action.editCompanyName,data:{}}); curEditId=action.editCompanyName">{{cpName}}</view>
				<view class="g-t" :class="{'dashed-line' : curEditId==action.editGoodsTitle}" @click.stop="edit({act:action.editGoodsTitle,data:{}}); curEditId=action.editGoodsTitle">{{gdTitle}}</view>
				<view class="g-t-2" :class="{'dashed-line' : curEditId==action.editGoodsTitle1}"  v-if="gdTitle2"  @click.stop="edit({act:action.editGoodsTitle1,data:{}}); curEditId=action.editGoodsTitle1">{{gdTitle2}}</view>
				<view class="c-t-txt" :class="{'dashed-line' : curEditId==action.editGoodsChangeDate}" @click.stop="edit({act:action.editGoodsChangeDate,data:{}}); curEditId=action.editGoodsChangeDate">兑换期限：{{changeSt}} 至  {{changeEt}}</view>
				<view class="c-c-txt">
					<text class="c-c-t">兑换码：{{changeCode}} </text>
					<text class="c-copy">复制</text>
				</view>
				<view class="c-btn">立即兑换</view>
				<view class="c-tip" :class="{'dashed-line' : curEditId==action.editGoodsCouponsChange}" @click.stop="edit({act:action.editGoodsCouponsChange,data:{}}); curEditId=action.editGoodsCouponsChange">{{tips}}</view>
			</view>
			<view class="info-middle">
				<view class="i-m-t">兑换券详情</view>
				<view class="c-t-box" :class="{'dashed-line' : curEditId==action.editGoodsChangeDate}" @click.stop="edit({act:action.editGoodsChangeDate,data:{}}); curEditId=action.editGoodsChangeDate">
					<text class="ct-lb">兑换期限</text>
					<text class="ct-u-t" >{{changeSt}} 至 {{changeEt}}</text>
				</view>
				<view class="c-t-box" :class="{'dashed-line' : curEditId==action.editGoodsCouponsUseTime}" @click.stop="edit({act:action.editGoodsCouponsUseTime,data:{}}); curEditId=action.editGoodsCouponsUseTime">
					<text class="ct-lb">可用时段</text>
					<text class="ct-u-t" >{{weekUseStr}}</text>
				</view>
				<view class="c-t-box" :class="{'dashed-line' : curEditId==action.editGoodsChangeAdress}" @click.stop="edit({act:action.editGoodsChangeAdress,data:{}}); curEditId=action.editGoodsChangeAdress">
					<text class="ct-lb">兑换地址</text>
					<text class="ct-u-t">{{adressTxt}}</text>
				</view>
				<view class="c-t-box" v-if="mustKown" :class="{'dashed-line' : curEditId==action.editGoodsChangeMustKnow}" @click.stop="edit({act:action.editGoodsChangeMustKnow,data:{}}); curEditId=action.editGoodsChangeMustKnow">
					<view class="ct-lb">兑换须知</view>
					<view class="ct-u-t">{{mustKown}}</view>
				</view>
			</view>
			
			<view class="info-foot">
				<view class="c-p-box c-p-box-c" v-if="cellPhone" :class="{'dashed-line' : curEditId==action.editSeviceCellphone}" @click.stop="edit({act:action.editSeviceCellphone,data:{}}); curEditId=action.editSeviceCellphone">
					<view class="cp-lb">客服电话</view>
					<view class="cp-ph-b" >
						<view class="c-phone">{{cellPhone}}</view>
						<text class="icon-font icon-phone" >&#xe60a;</text>
					</view>
				</view>
				<view class="c-p-box" v-if="isShowCpName" :class="{'dashed-line' : curEditId==action.editMakeCompanyDesc}" @click.stop="edit({act:action.editMakeCompanyDesc,data:{}}); curEditId=action.editMakeCompanyDesc">
					<view class="cp-txt" >主办单位介绍</view>
					<text class="icon-font icon-r">&#xe600;</text>
				</view>
				
				<view class="c-p-box" :class="{'dashed-line' : curEditId==action.editKnowMore}" @click.stop="edit({act:action.editKnowMore,data:{}}); curEditId=action.editKnowMore">
					<view class="cb-more">了解更多</view>
					<text class="icon-font icon-r" >&#xe600;</text>
				</view>
			</view>
		
			<view class="edit-page-bg" v-if="curEditId == action.editGoodsDetailsBg" @click.stop="edit({act:action.editGoodsDetailsBg,data:gdDetailSkin})">页面配色</view>
		</view>
		<activeGoodsDetailsBg ref="activeGoodsDetailsBg" @editGdDetailBg="editGdDetailBg"></activeGoodsDetailsBg>
	</view>
</template>

<script>
	import phoneSimuHead from "@/components/interactive/appComponrnts/phone-simulation-head.vue";
	
	import editInteractive from "@/js/inieractive/EditInteractive.js";
	
	import activeGoodsDetailsBg from "@/components/interactive/appComponrnts/active-goods-details-bg"
	
	export default{
		components:{phoneSimuHead,activeGoodsDetailsBg},
		data(){
			return{
				action:editInteractive.action,
				
				titleTxt:"",
				cpName:"女人帮.美容养生头疗SPA(朗悦店)",
				gdTitle:"价值10元礼品（示例）",
				gdTitle2:"副标题",
				changeSt:"2022.08.24",
				changeEt:"2022.08.31",
				changeCode:"888888",
				cellPhone:"1384568892",
				tips : "",
				curEditId:"",
				weekUseStr:"",
				adressTxt:"",
				mustKown:"",//兑换须知
				isShowCpName:true,//是否显示举办单位
				gdDetailSkin:
				{
					bgColor:"#3388FF",
				}
			}
		},
		created() {
			uni.$on('init_active_title',(data)=>{
				this.titleTxt = data;
			});
		},
		
		mounted() {
			
		},
		
		methods: {
			setGdInfo(data,gdExchDeatPage)
			{
				if(data)
				{
					if(data.gd_name)
					{
						this.gdTitle = data.gd_name;
					}
					else
					{
						this.gdTitle = "暂无产品名称";
					}
					
					if(data.set_gd_init)
					{
						if(data.set_gd_init.onoff_line_1) 
						{
						 	if(data.set_gd_init.onoff_line_1.gdname0)
							{
								this.gdTitle2 = data.set_gd_init.onoff_line_1.gdname0;
							}
							else
							{
								this.gdTitle2 = "副标题"
							}
							if(data.set_gd_init.onoff_line_1.tips)
							{
								this.tips = data.set_gd_init.onoff_line_1.tips;
							}
							else
							{
								this.tips = "凭券联系现场工作人员兑换"
							}
							
							if(data.set_gd_init.onoff_line_1.outday_ch)
							{
								this.changeSt = String(data.set_gd_init.onoff_line_1.outday_ch.time_from).split(" ")[0];
								if(String(data.set_gd_init.onoff_line_1.outday_ch.time_to).indexOf("T") >= 0)
								{
									this.changeEt = String(data.set_gd_init.onoff_line_1.outday_ch.time_to).split("T")[0];
								}
								else
								{
									this.changeEt = String(data.set_gd_init.onoff_line_1.outday_ch.time_to).split(" ")[0];
								}
							}
							else
							{
								this.changeSt = "";
								this.changeEt = "";
							}
							
							if(data.set_gd_init.onoff_line_1.week_use)
							{
								let weekArr = data.set_gd_init.onoff_line_1.week_use.week;
								if(Number(data.set_gd_init.onoff_line_1.week_use.type) === 1 || weekArr.length === 7)
								{
									this.weekUseStr = "周一至周日";
								}
								else
								{
									let wStr = "";
									weekArr = weekArr.sort();
									weekArr.forEach((s)=>{
										if(Number(s) == 1)
										{
											wStr = "周一";
										}
										if(Number(s) == 2)
										{
											wStr = wStr + ",周二";
										}
										if(Number(s) == 3)
										{
											wStr = wStr + ",周三";
										}
										if(Number(s) == 4)
										{
											wStr = wStr + ",周四";
										}
										if(Number(s) == 5)
										{
											wStr = wStr + ",周五";
										}
										if(Number(s) == 6)
										{
											wStr = wStr + ",周六";
										}
										if(Number(s) == 7)
										{
											wStr = wStr + ",周日";
										}
									});
									this.weekUseStr = wStr;
								}
							}
							
							if(Number(data.set_gd_init.onoff_line_1.address_cp.type) == 1)
							{
								if(data.set_gd_init.onoff_line_1.shop_address)
								{
									this.adressTxt = data.set_gd_init.onoff_line_1.shop_address;
								}
								else
								{
									this.adressTxt = "";
								}
							}
							else
							{
								if(data.address_long)
								{
									this.adressTxt = data.address_long;
								}
								else
								{
									this.adressTxt = "";
								}
							}
							
							
							if(data.set_gd_init.onoff_line_1.txt_ch)
							{
								this.mustKown = data.set_gd_init.onoff_line_1.txt_ch;
							}
							else
							{
								this.mustKown = "不填写则不显示";
							}
							
							if(data.set_gd_init.onoff_line_1.phone_kf)
							{
								this.cellPhone = data.set_gd_init.onoff_line_1.phone_kf;
							}
							else
							{
								this.cellPhone =  "请填写客服号码！";
							}
							
							this.isShowCpName = Number(data.set_gd_init.onoff_line_1.iscpname) == 1 ? true : false;
						}
					}
				}
			},
			
			edit(data)
			{
				let act = this.action;
				if(data.act == act.editGoodsDetailsBg)
				{
					this.$refs.activeGoodsDetailsBg.showWin(data);
				}
				else
				{
					editInteractive.eidt(data);
				}
			},
			
			
			
			editGdDetailBg(data)
			{
				this.gdDetailSkin = data.data;
				editInteractive.eidt(data);
			},
			
			updateSkin(data)
			{
				this.gdDetailSkin = data;
			},
			
			update(data)
			{
				let act = this.action;
				if(data.act == act.editGoodsTitle)//产品名称
				{
					this.gdTitle = data.data.gd_name;
				}
				else if(data.act == act.editGoodsCouponsChange)//操作提示
				{
					this.tips = data.data;
				}
				else if(data.act == act.editGoodsDetailsBg)//初始化背景颜色
				{
					this.gdDetailSkin = data.data;
				}
			}
		},
	}
</script>

<style lang="scss">
	.active-share-effect
	{
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #3388FF;
		.info-box
		{
			width: calc(100% - 40upx);
			height: calc(100% - 220upx);
			margin: 20upx;
			background-color: #FFF;
			border-radius: 10upx;
			color: #333;
			cursor: pointer;
			
			.edit-page-bg
			{
				padding: 2px 10px;
				background-color: #000;
				color: #FFF;
				border-radius: 4px;
				position: absolute;
				top:  63px;
				right: 10px;
			}
			.dashed-line
			{
				border: 1px #000 dashed !important;
				padding: 0 10px;
			}
			.info-head
			{	
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 40upx 20upx 20upx 20upx;
				border-bottom: 1upx #FAFAFA solid;
				.c-n
				{
				}
				.g-t
				{
					font-size: 50upx;
					font-weight: bold;
				}
				.g-t-2
				{
				}
				.c-t-txt
				{
				}
				.c-c-txt
				{
					display: flex;
					align-items: center;
					.c-c-t
					{
						font-size: 38upx;
						color: #3388FF;
						font-weight: bold;
						padding-right: 10upx;
					}
					.c-copy
					{
						padding: 0 24upx;
						font-size: 26upx;
						border-radius: 40upx;
						background-color: #DDD;
						color: #999;
						font-weight: normal;
					}
				}
				.c-btn
				{
					padding: 20upx 160upx;
					border-radius: 50upx;
					font-size: 30upx;
					color: #FFF;
					background-color: #3388FF;
				}
				.c-tip
				{
					color: #999;
				}
			}
			
			.info-middle
			{
				padding: 20upx 40upx 20upx 40upx;
				border-bottom: 1upx #FAFAFA solid;
				font-size: 30upx;
				.i-m-t
				{
					
				}
				.c-t-box
				{
					padding: 20upx 0 0 0;
					display: flex;
					.ct-lb
					{
						color: #999;
						min-width: 130upx;
					}
					.ct-u-t
					{
						color: #666;
						padding-left: 20upx;
					}
				}
			}
			
			.info-foot
			{
				padding: 20upx 40upx 20upx 40upx;
				font-size: 30upx;
				.c-p-box
				{
					display: flex;
					justify-content: space-between;
					padding: 20upx 0;
					border-bottom: 1upx #FAFAFA solid;
					.icon-r
					{
						color: #999;
					}
					.cp-ph-b
					{
						display: flex;
						align-items: center;
					}
					
					.c-phone
					{
						padding-right: 30upx;
						border-right: 1upx solid #EEE;
					}
					
					.icon-phone
					{
						font-size: 40upx;
						padding-left: 30upx;
						color: #3388FF;
					}
				}
				
				.c-p-box-c
				{
					align-items: center;
				}
				
			}
		}
		
	}
</style>